<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <title>Minton - Responsive Admin Dashboard Template</title>

        <link href="../plugins/switchery/switchery.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="../plugins/morris/morris.css">

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css">
        <link href="assets/css/style.css" rel="stylesheet" type="text/css">

        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left">

        <!-- Begin page -->
        <div id="wrapper">

            <!-- Top Bar Start -->
            <div class="topbar">

                <!-- LOGO -->
                <div class="topbar-left">
                    <div class="text-center">
                        <a href="index.html" class="logo"><i class="mdi mdi-radar"></i> <span>Minton</span></a>
                    </div>
                </div>

                <!-- Button mobile view to collapse sidebar menu -->
                <nav class="navbar-custom">

                    <ul class="list-inline float-right mb-0">

                        <li class="list-inline-item notification-list hide-phone">
                            <a class="nav-link waves-light waves-effect" href="ui-bootstrap.html#" id="btn-fullscreen">
                                <i class="mdi mdi-crop-free noti-icon"></i>
                            </a>
                        </li>

                        <li class="list-inline-item notification-list">
                            <a class="nav-link right-bar-toggle waves-light waves-effect" href="ui-bootstrap.html#">
                                <i class="mdi mdi-dots-horizontal noti-icon"></i>
                            </a>
                        </li>

                        <li class="list-inline-item dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="ui-bootstrap.html#" role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <i class="mdi mdi-bell noti-icon"></i>
                                <span class="badge badge-pink noti-icon-badge">4</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg" aria-labelledby="Preview">
                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h5 class="font-16"><span class="badge badge-danger float-right">5</span>Notification</h5>
                                </div>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-success"><i class="mdi mdi-comment-account"></i></div>
                                    <p class="notify-details">Robert S. Taylor commented on Admin<small class="text-muted">1 min ago</small></p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-info"><i class="mdi mdi-account"></i></div>
                                    <p class="notify-details">New user registered.<small class="text-muted">1 min ago</small></p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-danger"><i class="mdi mdi-airplane"></i></div>
                                    <p class="notify-details">Carlos Crouch liked <b>Admin</b><small class="text-muted">1 min ago</small></p>
                                </a>

                                <!-- All-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item notify-all">
                                    View All
                                </a>

                            </div>
                        </li>

                        <li class="list-inline-item dropdown notification-list">
                            <a class="nav-link dropdown-toggle waves-effect waves-light nav-user" data-toggle="dropdown" href="ui-bootstrap.html#" role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <img src="assets/images/users/avatar-1.jpg" alt="user" class="rounded-circle">
                            </a>
                            <div class="dropdown-menu dropdown-menu-right profile-dropdown " aria-labelledby="Preview">
                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h5 class="text-overflow"><small>Welcome ! John</small> </h5>
                                </div>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="mdi mdi-account"></i> <span>Profile</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="mdi mdi-settings"></i> <span>Settings</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="mdi mdi-lock-open"></i> <span>Lock Screen</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="mdi mdi-logout"></i> <span>Logout</span>
                                </a>

                            </div>
                        </li>

                    </ul>

                    <ul class="list-inline menu-left mb-0">
                        <li class="float-left">
                            <button class="button-menu-mobile open-left waves-light waves-effect">
                                <i class="mdi mdi-menu"></i>
                            </button>
                        </li>
                        <li class="hide-phone app-search">
                            <form role="search" class="">
                                <input type="text" placeholder="Search..." class="form-control">
                                <a href="ui-bootstrap.html"><i class="fa fa-search"></i></a>
                            </form>
                        </li>
                    </ul>

                </nav>

            </div>
            <!-- Top Bar End -->


            <!-- ========== Left Sidebar Start ========== -->

            <div class="left side-menu">
                <div class="sidebar-inner slimscrollleft">
                    <!--- Divider -->
                    <div id="sidebar-menu">
                        <ul>
                            <li class="menu-title">Main</li>

                            <li>
                                <a href="index.html" class="waves-effect waves-primary">
                                    <i class="ti-home"></i><span> Dashboard </span>
                                </a>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-shine"></i><span> Apps </span> 
                                    <span class="badge badge-pink pull-right">New</span> 
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="apps-kanban.html">Kanban Board</a></li>
                                    <li><a href="apps-companies.html">Companies</a></li>
                                    <li><a href="apps-filemanager.html">File Manager</a></li>
                                    <li><a href="apps-tickets.html">Tickets</a></li>
                                    <li><a href="apps-calendar.html">Calendar</a></li>
                                    <li><a href="apps-team.html">Team Members</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-email"></i><span> Mail </span> 
                                    <span class="menu-arrow"></span>
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="mail-inbox.html">Inbox</a></li>
                                    <li><a href="mail-compose.html">Compose Mail</a></li>
                                    <li><a href="mail-read.html">View Mail</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-paint-bucket"></i> <span> UI Kit </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="ui-buttons.html">Buttons</a></li>
                                    <li><a href="ui-cards.html">Cards</a></li>
                                    <li><a href="ui-portlets.html">Portlets</a></li>
                                    <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
                                    <li><a href="ui-tabs.html">Tabs & Accordions</a></li>
                                    <li><a href="ui-modals.html">Modals</a></li>
                                    <li><a href="ui-progressbars.html">Progress Bars</a></li>
                                    <li><a href="ui-notification.html">Notification</a></li>
                                    <li><a href="ui-bootstrap.html">BS Elements</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="typography.html" class="waves-effect waves-primary">
                                    <i class="ti-infinite"></i><span> Typography </span>
                                </a>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-light-bulb"></i><span> Components </span> 
                                    <span class="menu-arrow"></span> 
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="components-grid.html">Grid</a></li>
                                    <li><a href="components-carousel.html">Carousel</a></li>
                                    <li><a href="components-widgets.html">Widgets</a></li>
                                    <li><a href="components-nestable-list.html">Nesteble</a></li>
                                    <li><a href="components-range-sliders.html">Range Sliders </a></li>
                                    <li><a href="components-sweet-alert.html">Sweet Alerts </a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-pencil-alt"></i><span> Forms </span> 
                                    <span class="menu-arrow"></span>
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="form-elements.html">General Elements</a></li>
                                    <li><a href="form-advanced.html">Advanced Form</a></li>
                                    <li><a href="form-validation.html">Form Validation</a></li>
                                    <li><a href="form-wizard.html">Form Wizard</a></li>
                                    <li><a href="form-wysiwig.html">WYSIWYG Editor</a></li>
                                    <li><a href="form-summernote.html">Summernote</a></li>
                                    <li><a href="form-uploads.html">Multiple File Upload</a></li>
                                    <li><a href="form-xeditable.html">X-editable</a></li>
                                </ul>
                            </li>

                            <li class="menu-title">More</li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-menu-alt"></i><span> Tables </span> 
                                    <span class="menu-arrow"></span>
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="tables-basic.html">Basic Tables</a></li>
                                    <li><a href="tables-datatable.html">Data Table</a></li>
                                    <li><a href="tables-editable.html">Editable Table</a></li>
                                    <li><a href="tables-responsive.html">Responsive Table</a></li>
                                    <li><a href="tables-tablesaw.html">Tablesaw Table</a></li>
                                    <li><a href="tables-foo-tables.html">Foo Table</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-stats-up"></i><span> Charts </span> 
                                    <span class="badge badge-primary pull-right">8</span> 
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="chart-flot.html">Flot Chart</a></li>
                                    <li><a href="chart-morris.html">Morris Chart</a></li>
                                    <li><a href="chart-chartist.html">Chartist chart</a></li>
                                    <li><a href="chart-nvd3.html">Nvd3 charts</a></li>
                                    <li><a href="chart-chartjs.html">Chartjs charts</a></li>
                                    <li><a href="chart-peity.html">Peity Charts</a></li>
                                    <li><a href="chart-sparkline.html">Sparkline Charts</a></li>
                                    <li><a href="chart-other.html">Other Chart</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-map"></i><span> Maps </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="map-google.html"> Google Maps</a></li>
                                    <li><a href="map-vector.html"> Vector Maps</a></li>
                                    <li><a href="map-mapael.html"> Mapael Maps</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-spray"></i> <span> Icons </span> 
                                    <span class="menu-arrow"></span> 
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="icons-materialdesign.html">Material Design</a></li>
                                    <li><a href="icons-themifyicon.html">Themify Icons</a></li>
                                    <li><a href="icons-ionicons.html">Ion Icons</a></li>
                                    <li><a href="icons-fontawesome.html">Font awesome</a></li>
                                    <li><a href="icons-weather.html">Weather Icons</a></li>
                                </ul>
                            </li>

                            <li class="menu-title">Extras</li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-files"></i><span> Pages </span> 
                                    <span class="menu-arrow"></span>
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="pages-blank.html">Blank Page</a></li>
                                    <li><a href="pages-login.html">Login</a></li>
                                    <li><a href="pages-register.html">Register</a></li>
                                    <li><a href="pages-recoverpw.html">Recover Password</a></li>
                                    <li><a href="pages-lock-screen.html">Lock Screen</a></li>
                                    <li><a href="pages-confirmmail.html">Confirm Mail</a></li>
                                    <li><a href="pages-404.html">404 Error</a></li>
                                    <li><a href="pages-500.html">500 Error</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect waves-primary">
                                    <i class="ti-gift"></i><span> Extras </span> 
                                    <span class="badge badge-success pull-right">10</span>
                                </a>
                                <ul class="list-unstyled">
                                    <li><a href="extras-profile.html">Profile</a></li>
                                    <li><a href="extras-timeline.html">Timeline</a></li>
                                    <li><a href="extras-invoice.html">Invoice</a></li>
                                    <li><a href="extras-email-template.html">Email template</a></li>
                                    <li><a href="extras-maintenance.html">Maintenance</a></li>
                                    <li><a href="extras-coming-soon.html">Coming-soon</a></li>
                                    <li><a href="extras-gallery.html">Gallery</a></li>
                                    <li><a href="extras-pricing.html">Pricing</a></li>
                                    <li><a href="extras-faq.html">FAQ</a></li>
                                    <li><a href="extras-treeview.html">Treeview</a></li>
                                </ul>
                            </li>
                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect">
                                    <i class="ti-share"></i><span>Multi Level </span> 
                                    <span class="menu-arrow"></span>
                                </a>
                                <ul>
                                    <li class="has_sub">
                                        <a href="javascript:void(0);" class="waves-effect"><span>Menu Level 1.1</span>  <span class="menu-arrow"></span></a>
                                        <ul>
                                            <li><a href="javascript:void(0);"><span>Menu Level 2.1</span></a></li>
                                            <li><a href="javascript:void(0);"><span>Menu Level 2.2</span></a></li>
                                            <li><a href="javascript:void(0);"><span>Menu Level 2.3</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);"><span>Menu Level 1.2</span></a>
                                    </li>
                                </ul>
                            </li>
                        </ul>


                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <!-- Left Sidebar End -->




            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container-fluid">

                        <!-- Page-Title -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="page-title-box">
                                    <h4 class="page-title">Bootstrap UI</h4>
                                    <ol class="breadcrumb float-right">
                                        <li class="breadcrumb-item"><a href="ui-bootstrap.html#">Minton</a></li>
                                        <li class="breadcrumb-item"><a href="ui-bootstrap.html#">UI Kit</a></li>
                                        <li class="breadcrumb-item active">Bootstrap UI</li>
                                    </ol>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-12">
                                <div class="card-box">

                                    <div class="row">
                                        <div class="col-md-6 col-xs-12">
                                            <h4 class="m-t-0 header-title">Badge</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                Add any of the below mentioned modifier classes to change the appearance of a badge.
                                            </p>

                                            <div>
                                                <span class="badge badge-primary">Primary</span>
                                                <span class="badge badge-success">Success</span>
                                                <span class="badge badge-info">Info</span>
                                                <span class="badge badge-warning">Warning</span>
                                                <span class="badge badge-danger">Danger</span>
                                                <span class="badge badge-pink">Pink</span>
                                                <span class="badge badge-dark">Dark</span>
                                                <span class="badge badge-purple">Purple</span>
                                            </div>

                                        </div>

                                        <div class="col-md-6 col-xs-12 m-t-sm-40">
                                            <h4 class="m-t-0 header-title">Badge</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                Add any of the below mentioned modifier classes to change the appearance of a badge.
                                            </p>

                                            <div>
                                                <span class="badge badge-pill badge-primary">2</span>
                                                <span class="badge badge-pill badge-success">3</span>
                                                <span class="badge badge-pill badge-info">4</span>
                                                <span class="badge badge-pill badge-warning">25</span>
                                                <span class="badge badge-pill badge-danger">6</span>
                                                <span class="badge badge-pill badge-pink">10</span>
                                                <span class="badge badge-pill badge-dark">5</span>
                                                <span class="badge badge-pill badge-purple">8</span>
                                            </div>

                                        </div>

                                    </div>
                                    <!-- end row -->


                                    <div class="row">
                                        <div class="col-md-6 m-t-50">
                                            <h4 class="m-t-0 header-title">Popovers</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                Add small overlay content, like those found in iOS, to any element for housing secondary information.
                                            </p>

                                            <button type="button" class="btn btn-secondary waves-effect m-b-5" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                                Popover on top
                                            </button>

                                            <button type="button" class="btn btn-secondary waves-effect m-b-5" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                                Popover on right
                                            </button>

                                            <button type="button" class="btn btn-secondary waves-effect m-b-5"
                                                    data-container="body" data-toggle="popover" data-placement="bottom"
                                                    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                                Popover on bottom
                                            </button>

                                            <button type="button" class="btn btn-secondary waves-effect m-b-5" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                                Popover on left
                                            </button>

                                            <button type="button" class="btn btn-primary waves-effect waves-light m-b-5" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>

                                        </div>

                                        <div class="col-md-6 col-xs-12 m-t-50">
                                            <h4 class="m-t-0 header-title">Tooltips</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                Hover over the links below to see tooltips:
                                            </p>

                                            <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                                                Tooltip on top
                                            </button>

                                            <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
                                                Tooltip on right
                                            </button>

                                            <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                                                Tooltip on bottom
                                            </button>

                                            <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                                                Tooltip on left
                                            </button>

                                        </div>

                                    </div>
                                    <!-- end row -->


                                    <div class="row m-t-50">

                                        <!-- Pagination -->
                                        <div class="col-md-6 m-t-20">
                                            <h4 class="m-t-0 header-title">Pagination</h4>
                                            <p class="text-muted m-b-30 font-13">
                                                Provide pagination links for your site or app with the multi-page pagination component.
                                            </p>

                                            <div>
                                                <h6 class="m-b-5">Default Pagination</h6>
                                                <p class="text-muted font-13">
                                                    Simple pagination inspired by Rdio, great for apps and search results.
                                                </p>
                                                <nav>
                                                    <ul class="pagination">
                                                        <li class="page-item">
                                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Previous">
                                                                <span aria-hidden="true">&laquo;</span>
                                                                <span class="sr-only">Previous</span>
                                                            </a>
                                                        </li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">4</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">5</a></li>
                                                        <li class="page-item">
                                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Next">
                                                                <span aria-hidden="true">&raquo;</span>
                                                                <span class="sr-only">Next</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </nav>

                                                <div class="m-b-5"></div>

                                                <h6 class="m-b-5">Split Pagination</h6>
                                                <p class="text-muted font-13">
                                                    Links are split to each other by adding a class of <code>
                                                    .pagination-split</code>
                                                </p>
                                                <nav>
                                                    <ul class="pagination pagination-split">
                                                        <li class="page-item">
                                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Previous">
                                                                <span aria-hidden="true">&laquo;</span>
                                                                <span class="sr-only">Previous</span>
                                                            </a>
                                                        </li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                                        <li class="page-item active"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">4</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">5</a></li>
                                                        <li class="page-item">
                                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Next">
                                                                <span aria-hidden="true">&raquo;</span>
                                                                <span class="sr-only">Next</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </nav>

                                                <div class="m-b-5"></div>

                                                <h6 class="m-b-5">Sizing</h6>
                                                <p class="text-muted font-13">
                                                    Add <code>
                                                    .pagination-lg</code>
                                                    or <code>
                                                    .pagination-sm</code>
                                                    for additional sizes.
                                                </p>
                                                <nav>
                                                    <ul class="pagination pagination-lg m-b-0">
                                                        <li class="page-item">
                                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Previous">
                                                                <span aria-hidden="true">&laquo;</span>
                                                                <span class="sr-only">Previous</span>
                                                            </a>
                                                        </li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                                        <li class="page-item">
                                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Next">
                                                                <span aria-hidden="true">&raquo;</span>
                                                                <span class="sr-only">Next</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </nav>

                                                <h6 class="m-b-5">Alignment</h6>
                                                <p class="text-muted font-13">
                                                    Change the alignment of pagination components with flexbox utilities.
                                                </p>

                                                <nav aria-label="Page navigation example">
                                                    <ul class="pagination justify-content-center">
                                                        <li class="page-item disabled">
                                                            <a class="page-link" href="ui-bootstrap.html#" tabindex="-1">Previous</a>
                                                        </li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                                        <li class="page-item">
                                                            <a class="page-link" href="ui-bootstrap.html#">Next</a>
                                                        </li>
                                                    </ul>
                                                </nav>

                                                <nav aria-label="Page navigation example">
                                                    <ul class="pagination justify-content-end">
                                                        <li class="page-item disabled">
                                                            <a class="page-link" href="ui-bootstrap.html#" tabindex="-1">Previous</a>
                                                        </li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                                        <li class="page-item">
                                                            <a class="page-link" href="ui-bootstrap.html#">Next</a>
                                                        </li>
                                                    </ul>
                                                </nav>

                                            </div>
                                        </div>
                                        <!-- end col -->

                                    </div>


                                    <div class="row m-t-50">

                                        <!-- Pagination -->
                                        <div class="col-12 m-t-20">
                                            <h4 class="m-t-0 header-title">Breadcrumb</h4>
                                            <p class="text-muted m-b-30 font-13">
                                                Indicate the current page’s location within a navigational hierarchy.
                                            </p>

                                            <ol class="breadcrumb m-b-20">
                                                <li class="breadcrumb-item active">Home</li>
                                            </ol>
                                            <ol class="breadcrumb m-b-20">
                                                <li class="breadcrumb-item"><a href="ui-bootstrap.html#">Home</a></li>
                                                <li class="breadcrumb-item active">Library</li>
                                            </ol>
                                            <ol class="breadcrumb m-b-20">
                                                <li class="breadcrumb-item"><a href="ui-bootstrap.html#">Home</a></li>
                                                <li class="breadcrumb-item"><a href="ui-bootstrap.html#">Library</a></li>
                                                <li class="breadcrumb-item active">Data</li>
                                            </ol>
                                        </div>
                                        <!-- end col -->

                                    </div>
                                    <!-- end row -->


                                    <div class="row">

                                        <!-- Standard Alert -->
                                        <div class="col-md-6 m-t-50">
                                            <h4 class="m-t-0 header-title"><b>Standard Alert</b></h4>
                                            <p class="text-muted m-b-30 font-13 m-h-40">
                                                Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.
                                            </p>

                                            <div class="alert alert-success">
                                                <strong>Well done!</strong> You successfully read this important alert message.
                                            </div>
                                            <div class="alert alert-info">
                                                <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                                            </div>
                                            <div class="alert alert-warning">
                                                <strong>Warning!</strong> Better check yourself, you're not looking too good.
                                            </div>
                                            <div class="alert alert-danger">
                                                <strong>Oh snap!</strong> Change a few things up and try submitting again.
                                            </div>

                                            <div class="alert alert-success fade show m-b-0">
                                                <h4 class="text-success">Big one!</h4>
                                                <p>
                                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                                                </p>
                                                <p class="mb-0">
                                                    <button type="button" class="btn btn-success waves-effect waves-light">
                                                        Wanna do this
                                                    </button>
                                                    <button type="button" class="btn btn-light waves-effect">
                                                        Or do this
                                                    </button>
                                                </p>
                                            </div>

                                        </div>
                                        <!-- end col -Standard Alert -->

                                        <div class="col-md-6 m-t-50">
                                            <h4 class="m-t-0 header-title"><b>Dismissable Alert</b></h4>
                                            <p class="text-muted m-b-30 font-13 m-h-40">
                                                Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.
                                            </p>

                                            <div class="alert alert-success alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="ui-bootstrap.html#" class="alert-link">Alert Link</a>.
                                            </div>
                                            <div class="alert alert-info alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="ui-bootstrap.html#" class="alert-link">Alert Link</a>.
                                            </div>
                                            <div class="alert alert-warning alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="ui-bootstrap.html#" class="alert-link">Alert Link</a>.
                                            </div>
                                            <div class="alert alert-danger alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="ui-bootstrap.html#" class="alert-link">Alert Link</a>.
                                            </div>

                                            <div class="alert alert-info fade show m-b-0">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                <h4 class="text-info">Big one!</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                                                <p class="mb-0">
                                                    <button type="button" class="btn btn-info waves-effect waves-light">Wanna do this</button>
                                                    <button type="button" class="btn btn-light waves-effect">Or do this</button>
                                                </p>
                                            </div>
                                        </div>

                                    </div>
                                    <!-- End row -->

                                </div>
                            </div>
                        </div>
                        <!-- end row -->



                    </div>
                    <!-- end container -->
                </div>
                <!-- end content -->

                <footer class="footer">
                    2016 - 2018 © Minton <span class="hide-phone">- Coderthemes.com</span>
                </footer>

            </div>
            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->


            <!-- Right Sidebar -->
            <div class="side-bar right-bar">
                <div class="">
                    <ul class="nav nav-tabs tabs-bordered nav-justified">
                        <li class="nav-item">
                            <a href="ui-bootstrap.html#home-2" class="nav-link active" data-toggle="tab" aria-expanded="false">
                                Activity
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="ui-bootstrap.html#messages-2" class="nav-link" data-toggle="tab" aria-expanded="true">
                                Settings
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="home-2">
                            <div class="timeline-2">
                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">5 minutes ago</small>
                                        <p><strong><a href="ui-bootstrap.html#" class="text-info">John Doe</a></strong> Uploaded a photo <strong>"DSC000586.jpg"</strong></p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">30 minutes ago</small>
                                        <p><a href="ui-bootstrap.html" class="text-info">Lorem</a> commented your post.</p>
                                        <p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet tellus ut tincidunt euismod. "</em></p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">59 minutes ago</small>
                                        <p><a href="ui-bootstrap.html" class="text-info">Jessi</a> attended a meeting with<a href="ui-bootstrap.html#" class="text-success">John Doe</a>.</p>
                                        <p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet tellus ut tincidunt euismod. "</em></p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">1 hour ago</small>
                                        <p><strong><a href="ui-bootstrap.html#" class="text-info">John Doe</a></strong>Uploaded 2 new photos</p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">3 hours ago</small>
                                        <p><a href="ui-bootstrap.html" class="text-info">Lorem</a> commented your post.</p>
                                        <p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet tellus ut tincidunt euismod. "</em></p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">5 hours ago</small>
                                        <p><a href="ui-bootstrap.html" class="text-info">Jessi</a> attended a meeting with<a href="ui-bootstrap.html#" class="text-success">John Doe</a>.</p>
                                        <p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet tellus ut tincidunt euismod. "</em></p>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="tab-pane" id="messages-2">

                            <div class="row m-t-20">
                                <div class="col-8">
                                    <h5 class="m-0 font-15">Notifications</h5>
                                    <p class="text-muted m-b-0"><small>Do you need them?</small></p>
                                </div>
                                <div class="col-4 text-right">
                                    <input type="checkbox" checked data-plugin="switchery" data-color="#3bafda" data-size="small"/>
                                </div>
                            </div>

                            <div class="row m-t-20">
                                <div class="col-8">
                                    <h5 class="m-0 font-15">API Access</h5>
                                    <p class="m-b-0 text-muted"><small>Enable/Disable access</small></p>
                                </div>
                                <div class="col-4 text-right">
                                    <input type="checkbox" checked data-plugin="switchery" data-color="#3bafda" data-size="small"/>
                                </div>
                            </div>

                            <div class="row m-t-20">
                                <div class="col-8">
                                    <h5 class="m-0 font-15">Auto Updates</h5>
                                    <p class="m-b-0 text-muted"><small>Keep up to date</small></p>
                                </div>
                                <div class="col-4 text-right">
                                    <input type="checkbox" checked data-plugin="switchery" data-color="#3bafda" data-size="small"/>
                                </div>
                            </div>

                            <div class="row m-t-20">
                                <div class="col-8">
                                    <h5 class="m-0 font-15">Online Status</h5>
                                    <p class="m-b-0 text-muted"><small>Show your status to all</small></p>
                                </div>
                                <div class="col-4 text-right">
                                    <input type="checkbox" checked data-plugin="switchery" data-color="#3bafda" data-size="small"/>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- /Right-bar -->

        </div>
        <!-- END wrapper -->



        <script>
            var resizefunc = [];
        </script>

        <!-- Plugins  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="../plugins/switchery/switchery.min.js"></script>

        <!-- Custom main Js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>
</html>